<template>
  <div class="app-container page-container">
    <el-container>
      <SidebarMenu @menu-change="handleMenuChange" />
      <el-main class="main-content">
        <div class="header">
          <h2>{{ currentTabName }}</h2>
        </div>
        <IndicatorTable v-if="currentTab === 'zbgl'" ref="indicatorTableRef"/>
        <Text v-else-if="currentTab === 'tjsz'" ref="textRef"/>
        <OnlineFill v-else-if="currentTab === 'zxtb'" ref="onlineFillRef"/>
        <OnsiteSurvey v-else-if="currentTab === 'xccd'" ref="onsiteSurveyRef"/>
        <Formula v-else-if="currentTab === 'zbgsgl'" ref="formulaRef"/>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import SidebarMenu from './components/SidebarMenu.vue'
import IndicatorTable from './components/IndicatorTable.vue'
import Text from './components/Text.vue'
import OnlineFill from './components/OnlineFill.vue'
import OnsiteSurvey from './components/OnsiteSurvey.vue'
import Formula from './components/Formula.vue'

const currentTab = ref('zbgl')
const currentTabName = ref('指标分类管理')
const indicatorTableRef = ref()
const textRef = ref() 
const onlineFillRef = ref()
const onsiteSurveyRef = ref() 
const formulaRef = ref()


const handleMenuChange = (e: any) => {
  // console.log("-----",e)
  currentTab.value = e.value
  currentTabName.value = e.name
  switch(e.value){
    case 'zbgl':
      indicatorTableRef?.value?.fetchData()
      break
    case 'tjsz':
      textRef?.value?.fetchData()
      break
    case 'zxtb':
      onlineFillRef?.value?.fetchData()
      break
    case 'xccd':
      onsiteSurveyRef?.value?.fetchData()
      break 
    case 'zbgsgl':
      formulaRef?.value?.fetchData()
      break
  }
}










</script>

<style scoped>
.app-container {
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  
  .main-content {
    padding: 20px;
    background-color: #f5f7fa;
    
    .header {
      margin-bottom: 20px;
      
      h2 {
        color: #333;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
</style>